<template>
  <el-row type="flex" justify="center" style="height:100%; background:#f5f5f5;">
    <el-col :span="24" style="height:72.5vh;overflow-y:scroll; overflow-x:hidden;" >
        <el-row ref="container" type="flex" justify="center" align="middle">
          <el-col
            v-for="(bubble, index) in bubbleList"
            :key="index"
            style="padding: 0px 25px 5px 25px"
          >
            <Bubble :info="bubble" />
          </el-col>
        </el-row>
        <el-badge
          :value="unreadCount"
          class="item"
          v-show="unreadCount > 0"
          style="position: absolute; right: 20px; bottom: 180px"
        >
          <el-button @click="onClickScrollToBottom" size="small"
            >新消息</el-button
          >
        </el-badge>
    </el-col>
    <el-col :span="24" >
      <el-row :gutter="3" type="flex" justify="center">
        <el-col :span="20">
          <el-input
            type="textarea"
            maxlength="90"
            resize="none"
            show-word-limit
            :rows="3"
            placeholder="请输入内容"
            v-model="ebChatValue"
          >
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button
            @click="onClickSendBubble"
            type="primary"
            icon="el-icon-chat-line-round"
          ></el-button>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>
<script>
import cacheData from "../js/data";
import Bubble from "./bubble.vue";
import network from "../js/network";
import Message from "../js/message";
export default {
  name: "MainWindow",
  components: {
    Bubble,
  },
  props: {},
  data() {
    return {
      unreadCount: 0,
      container: null,
      bubbleList: [],
      ebChatValue: "",
      btnAlt: false,
      btnCtrl: false,
    };
  },
  created() {
    cacheData.on("onArriveBubble", this.onArriveBubble, this);
    document.addEventListener("keydown", this.onKeyDown);
    document.addEventListener("keyup", this.onKeyUp);
  },
  beforeMount() {
    let list = cacheData?.roomInfo?.bubbleList;
    if (list && list.length > 0) {
      this.bubbleList = list.slice();
    }
  },
  mounted() {
    this.$refs.container.$el.addEventListener("scroll", this.onContainerScroll);
  },
  unmounted() {
    network.off(this);
    cacheData.off(this);
    document.removeEventListener("keydown", this.onKeyDown);
    document.removeEventListener("keyup", this.onKeyUp);
  },
  methods: {
    onContainerScroll(e) {
      e;
      let container = this.$refs.container.$el;
      // console.log("父滚动条到页面顶部距离", e.target.offsetTop);
      // console.log("相对距离", container.scrollTop);
      // console.log("绝对距离",e.target.offsetTop + container.scrollTop);
      // console.log("总高度", container.scrollHeight );
      // console.log("百分比", (container.scrollTop / (container.scrollHeight-container.clientHeight)) * 100 );
      if (this.unreadCount > 0) {
        let percent =
          container.scrollTop /
          (container.scrollHeight - container.clientHeight);
        if (percent > 0.9) {
          this.unreadCount = 0;
        }
      }
    },
    onKeyDown(e) {
      var key = window.event.keyCode
        ? window.event.keyCode
        : window.event.which;
      // console.log("keyDown:", key);
      if (key == 17) {
        this.btnCtrl = true;
        e.preventDefault(); //取消浏览器原有的ctrl+s操作
      }
      if (key === 18) {
        this.btnAlt = true;
        e.preventDefault(); //取消浏览器原有的ctrl+s操作
      }

      if (
        (key === "s".charCodeAt(0) - 32 && this.btnAlt) ||
        (key === 13 && this.btnCtrl)
      ) {
        //发送消息
        this.onClickSendBubble();
        e.preventDefault();
      }
    },
    onKeyUp(e) {
      // enter
      var key = window.event.keyCode
        ? window.event.keyCode
        : window.event.which;
      // console.log("keyUp:", key);
      if (key == 17) {
        this.btnCtrl = false;
        e.preventDefault(); //取消浏览器原有的ctrl+s操作
      }
      if (key === 18) {
        this.btnAlt = false;
        e.preventDefault();
      }
    },
    onArriveBubble(bubbleInfo) {
      this.bubbleList.push(bubbleInfo);
      let container = this.$refs.container.$el;

      if (container.scrollHeight > container.clientHeight) {
        //计算百分比
        let percent =
          container.scrollTop /
          (container.scrollHeight - container.clientHeight);
        if (percent > 0.75) {
          setTimeout(() => {
            container.scrollTo(0, container.scrollHeight);
          }, 10);
        } else {
          this.unreadCount++;
        }
      }
    },
    onClickSendBubble() {
      if (this.ebChatValue.length == 0) {
        return;
      }
      let msg = new Message(Message.Type.CMAddBubble);
      msg.data["text"] = `${this.ebChatValue}`;
      network.sendMessage(msg);

      this.ebChatValue = "";
    },
    onClickScrollToBottom() {
      let container = this.$refs.container.$el;
      container.scrollTo(0, container.scrollHeight);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* .board {
  background: #f5f5f5;
  overflow-y: scroll;
  height: 80vh;
}

.edit-pad {
  min-height: 90px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding-top: 10px;
  overflow: hidden;
  position : fixed;
  bottom: 120px;
} */
</style>